
import { Database, Loader2, AlertCircle, CheckCircle } from 'lucide-react'

interface PartitionInfo {
  partition: number
  leader: number
  replicas: number[]
  isr: number[]
  messageCount?: number
  latestOffset?: number
}

interface PartitionSelectorProps {
  partitions: number[]
  partitionDetails: PartitionInfo[]
  selectedPartition?: number
  onPartitionChange: (partition: number | undefined) => void
  loading: boolean
  error: string | null
  topicName?: string
}

export default function PartitionSelector({
  partitions,
  partitionDetails,
  selectedPartition,
  onPartitionChange,
  loading,
  error,
  topicName
}: PartitionSelectorProps) {
  const getPartitionDetail = (partitionNum: number) => {
    return partitionDetails.find(p => p.partition === partitionNum)
  }

  const formatNumber = (num?: number) => {
    if (num === undefined || num === null) return '-'
    return num.toLocaleString()
  }

  return (
    <div className="space-y-4">
      {/* 分区选择器头部 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <Database className="w-5 h-5 text-primary-600" />
          <h3 className="text-lg font-semibold text-gray-900">分区选择</h3>
          {loading && (
            <Loader2 className="w-4 h-4 text-primary-500 animate-spin" />
          )}
        </div>
        
        <div className="flex items-center space-x-2 text-sm text-gray-600">
          {partitions.length > 0 && (
            <span className="px-2 py-1 bg-primary-100 text-primary-700 rounded-full font-medium">
              {partitions.length} 个分区
            </span>
          )}
          {loading && (
            <span className="text-blue-600 font-medium">加载中...</span>
          )}
        </div>
      </div>

      {/* 错误提示 */}
      {error && (
        <div className="flex items-center space-x-2 p-3 bg-red-50 border border-red-200 rounded-lg">
          <AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0" />
          <div>
            <p className="text-sm font-medium text-red-800">加载分区信息失败</p>
            <p className="text-xs text-red-600">{error}</p>
          </div>
        </div>
      )}

      {/* 全部分区选项 */}
      <div className="space-y-2">
        <button
          onClick={() => onPartitionChange(undefined)}
          className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
            selectedPartition === undefined
              ? 'border-primary-500 bg-primary-50 text-primary-700'
              : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'
          }`}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <CheckCircle className={`w-4 h-4 ${
                selectedPartition === undefined ? 'text-primary-500' : 'text-gray-400'
              }`} />
              <span className="font-medium">所有分区</span>
            </div>
            <span className="text-sm text-gray-500">
              消费所有分区的消息
            </span>
          </div>
        </button>

        {/* 分区列表 */}
        {partitions.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
            {partitions.map((partitionNum) => {
              const detail = getPartitionDetail(partitionNum)
              const isSelected = selectedPartition === partitionNum
              const hasDetail = detail !== undefined
              
              return (
                <button
                  key={partitionNum}
                  onClick={() => onPartitionChange(partitionNum)}
                  className={`p-3 rounded-lg border-2 transition-all duration-200 text-left ${
                    isSelected
                      ? 'border-primary-500 bg-primary-50'
                      : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'
                  }`}
                >
                  <div className="space-y-2">
                    {/* 分区号 */}
                    <div className="flex items-center justify-between">
                      <span className={`font-semibold ${
                        isSelected ? 'text-primary-700' : 'text-gray-900'
                      }`}>
                        分区 {partitionNum}
                      </span>
                      {hasDetail && (
                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                      )}
                    </div>
                    
                    {/* 分区详情 */}
                    {hasDetail ? (
                      <div className="space-y-1 text-xs text-gray-600">
                        <div className="flex justify-between">
                          <span>Leader:</span>
                          <span className="font-medium">{detail.leader}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>副本:</span>
                          <span className="font-medium">{detail.replicas.length}</span>
                        </div>
                        {detail.messageCount !== undefined && (
                          <div className="flex justify-between">
                            <span>消息数:</span>
                            <span className="font-medium">{formatNumber(detail.messageCount)}</span>
                          </div>
                        )}
                        {detail.latestOffset !== undefined && (
                          <div className="flex justify-between">
                            <span>最新偏移:</span>
                            <span className="font-medium">{formatNumber(detail.latestOffset)}</span>
                          </div>
                        )}
                      </div>
                    ) : loading ? (
                      <div className="flex items-center space-x-2 text-xs text-gray-500">
                        <Loader2 className="w-3 h-3 animate-spin" />
                        <span>加载详情...</span>
                      </div>
                    ) : (
                      <div className="text-xs text-gray-500">
                        点击查看详情
                      </div>
                    )}
                  </div>
                </button>
              )
            })}
          </div>
        ) : !loading && !error && (
          <div className="text-center py-8 text-gray-500">
            <Database className="w-12 h-12 mx-auto mb-3 text-gray-300" />
            <p className="text-sm">
              {topicName ? `Topic "${topicName}" 暂无分区信息` : '请先选择一个Topic'}
            </p>
          </div>
        )}
      </div>

      {/* 加载占位符 */}
      {loading && partitions.length === 0 && (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
          {[...Array(3)].map((_, index) => (
            <div
              key={index}
              className="p-3 rounded-lg border-2 border-gray-200 bg-gray-50 animate-pulse"
            >
              <div className="space-y-2">
                <div className="h-4 bg-gray-300 rounded w-20"></div>
                <div className="space-y-1">
                  <div className="h-3 bg-gray-300 rounded w-full"></div>
                  <div className="h-3 bg-gray-300 rounded w-3/4"></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
